<template>
    <div class="page_MyPublish">

        <van-nav-bar title="我的发布"
            left-arrow
            @click-left="$router.push('/myCompany/companyHome')">
            <template #right>
                <van-icon
                  name="search"
                  @click="searchBoxShow = !searchBoxShow; toClearKeyWord(!!searchParams.keyword)"
                  size="20"
                />
            </template>
        </van-nav-bar>

        <van-search
          v-show='searchBoxShow'
          v-model="searchParams.keyword"
          placeholder="请输入企业名称搜索"
          show-action
          shape="round"
          @search="handleSearch"
          @clear="toClearKeyWord"
        >
          <div slot="action" @click="handleSearch">搜索</div>
        </van-search>

        <com-filter-menu
          :rightOptionObj="rightOptionObj"
          :rightOption="rightOption"
          :rightValue="searchParams.status"
          @getFilterMenuValue="toGetFilterMenuValue_MyPublish"
        ></com-filter-menu>

        <!-- 卡片 -->
        <div class="jobArr" v-if="myPublishList.length">
            <job-item-for-recruit
              v-for="(item, index) in myPublishList"
              :key="item.id"
              :jobItem="item"
              :keyWord="'myCompany_myPublish'"
            ></job-item-for-recruit>
            <van-pagination
              v-show="total > 0"
              style="margin: 10px 0"
              v-model="searchParams.pageIndex"
              :total-items="total"
              @change="getPaginationValue_myPublish"
              :items-per-page="searchParams.pageSize"
            >
            <template #prev-text>
              <van-icon name="arrow-left" />
            </template>
            <template #next-text>
              <van-icon name="arrow" />
            </template>
            <template #page="{ text }">{{ text }}</template>
          </van-pagination>
        </div>

        <van-divider style="margin-top: 80px" v-else>暂无记录</van-divider>
    </div>
</template>

<script>
import comFilterMenu from '../../../components/comFilterMenu';
import jobItemForRecruit from "../recruitmentManagement/common/jobItemForRecruit";
import {reqCompanyLists} from "../../../api/myCompany";

import {Toast} from "vant";

const rightOptionObj = {
  '-1': '全部',
  '0': '审核中',
  '1': '已审核',
  '2': '已驳回'
}
const rightOption = [
  {text: '全部', value: '-1'},
  {text: '审核中', value: '0'},
  {text: '已审核', value: '1'},
  {text: '已驳回', value: '2'}
]

export default {
  name: 'MyPublish',
  components: {
    comFilterMenu,
    jobItemForRecruit,
  },
  data() {
    return {
      rightOption,
      rightOptionObj,
      myPublishList:  [],
      searchBoxShow: false,
      total: 0,
      searchParams: {
        status: '-1',
        // 关键字
        keyword: '',
        pageIndex: 1, // 当前页
        pageSize: 10, // 每页显示条数
      },

    }
  },

  created() {
    // 初始化
    this._getMyPublishList(this.searchParams)
  },

  methods: {
    async _getMyPublishList(paramsObj) {
      const res = await reqCompanyLists(paramsObj)
      if (res.code === 200) {
        this.myPublishList = res.data.items
        this.total = res.data.count
      }
    },

    handleSearch() {
      this.searchParams.pageIndex = 1
      if(this.searchParams.keyword.trim()){
        this._getMyPublishList(this.searchParams);
      } else {
        Toast('请先输入！');
      }
    },

    toClearKeyWord(isQuery = true){
      if(!isQuery){
        return null
      }
      this.searchParams.keyword = '';
      this.searchParams.pageIndex = 1;
      this.searchParams.status = '-1'
      this.$nextTick(() => {
        this._getMyPublishList(this.searchParams)
      })
    },

    getPaginationValue_myPublish(pageIndex) {
      Object.assign(this.searchParams, {pageIndex});
      // 指定页
      this._getMyPublishList(this.searchParams)
    },

    toGetFilterMenuValue_MyPublish(val) {
      Object.assign(this.searchParams, {
        status: val,
        pageIndex: 1,
      });
      this.$nextTick(()=>{
        this._getMyPublishList(this.searchParams)
      });
    },
  }
}
</script>

<style lang="scss" scoped>

</style>
